<template>
  <div>
    <el-date-picker
      size="small"
      value-format="yyyy-MM"
      align="center"
      :clearable="false"
      v-model="CheckInfo.num"
      type="month"
      @change="changeCalendarDate($event)"
      ref="cascaderRefOne"
      popper-class="cascaderRef"
    >
    </el-date-picker>

    <!--侧边栏-日历部分  -->
    <el-row :span="6" style="margin-top: 1rem">
      <el-card>
        <el-calendar v-model="monthValue">
          <template slot="dateCell" slot-scope="{ data }">
            <span>{{ data.day.split("-").slice(2).join("-") }}</span>
            <div v-for="(item, i) in dataList" :key="i">
              <div v-if="item.date == data.day">
                {{ item.content }}
              </div>
            </div>
          </template>
        </el-calendar>
      </el-card>
    </el-row>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      monthValue: "",
      CheckInfo: {
        num: "",
        peopleNum: "",
      },
      // value: new Date(),
      dataList: [
        { date: "2024-11-08", content: "2" },
        { date: "2024-05-08", content: "3" },
        { date: "2024-11-03", content: "4" },
        { date: "2024-11-28", content: "5" },
      ],
    };
  },
  created() {},
  methods: {
    changeCalendarDate(value) {
      if (value != undefined) {
        console.log(JSON.stringify(value));
        this.CheckInfo.num = value; //月份改变时改变参数再调用接口
        // this.getCheckInfo(this.CheckInfo);
        this.monthValue = new Date(this.CheckInfo.num); //同步日历与选择器的日期数据
        // console.log(JSON.stringify(monthValue));
        this.$refs.cascaderRefOne.dropDownVisible = false;
      }
    },
  },
  watch: {},
};
</script>
 
<style scoped lang="scss">
::deep .el-calendar-table .el-calendar-day {
  height: 50px !important;
}
.calendar-edit-bth {
  margin-top: 3px;
  float: right;
  margin-bottom: 2px;
}
.calendar-reset-bth {
  margin-top: 3px;
  float: right;
  margin-bottom: 2px;
  margin-right: 4px;
}
</style>